<template>
    <div class="home-box">
        <main class="home-main">
            <div class="white-box">
                <head-title title="数据" :subtitle="'更新时间 ' + update_time"></head-title>
                <div class="home-two">
                    <div class="shop-one flexs">
                        <div class="shop-one__item" :style="{ backgroundImage: `url(${item.bg})` }" v-for="(item, index) in dataArr" :key="index">
                            <p class="shop-one__text">{{ item.text }}</p>
                            <p class="shop-one__nums">{{ item.nums }}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="white-box">
                <head-title title="佣金信息"></head-title>
                <div class="shop-two flexs">
                    <div class="shop-two__item" v-for="(item, index) in totalCommission" :key="index">
                        <el-image class="shop-two-icon" :src="item.icon" fit="cover" />
                        <div class="shop-two__right">
                            <p class="shop-two__text">{{ item.text }}</p>
                            <p class="shop-two__nums">
                                {{ item.nums }}<span>{{ item.unit }}</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
          <div></div>
        </main>
    </div>
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, computed, onBeforeUnmount } from "vue"
import { useRouter } from "vue-router"
import { useBaseStore } from "@store/base"
import HeadTitle from "@components/HeadTitle.vue"

import i1 from "@images/icon1.png"
import i2 from "@images/icon2.png"
import i3 from "@images/icon3.png"
import i4 from "@images/icon4.png"
import i5 from "@images/icon5.png"
import i6 from "@images/icon6.png"
import i7 from "@images/icon7.png"
import i8 from "@images/icon8.png"
import i9 from "@images/icon9.png"
import i10 from "@images/icon10.png"
import i11 from "@images/icon11.png"
import i12 from "@images/icon12.png"
import i13 from "@images/icon13.png"
import i14 from "@images/icon14.png"
import i15 from "@images/icon15.png"
import i16 from "@images/icon16.png"
import i17 from "@images/icon17.png"

import iconZddsl from "@images/icon-zddsl.png"
import iconZhysl from "@images/icon-zhysl.png"
import iconZspsl from "@images/icon-zspsl.png"
import iconZdjyj from "@images/icon-zdjyj.png"
import iconZfhcs from "@images/icon-zfhcs.png"
import iconZfhyj from "@images/icon-zfhyj.png"
import iconZfxyj from "@images/icon-zfxyj.png"
import iconZjf from "@images/icon-zjf.png"
import iconZzpyj from "@images/icon-zzpyj.png"



const router = useRouter()
const { proxy } = getCurrentInstance()

const storeBase = useBaseStore()

onMounted(() => {
    getCounts()
})

onBeforeUnmount(() => {

})
// 统计
const countObjs = ref({})
function getCounts() {
    proxy.$axios
        .get("/users/statistics")
        .then((res) => {
            if (res.data.code == 200) {
                let result = res.data.data;
                let _totalCommission = result.totalCommission;
                countObjs.value = result;

                // 数据
                dataArr.value[0].nums = result.totalGoodsCount
                dataArr.value[1].nums = result.totalOrderCount
                dataArr.value[2].nums = result.totalUserCount

                // 佣金信息
                totalCommission.value[0].nums = _totalCommission.totalDividend
                totalCommission.value[1].nums = _totalCommission.totalDividendCount
                totalCommission.value[2].nums = _totalCommission.totalDominate
                totalCommission.value[3].nums = _totalCommission.totalFreeze
                totalCommission.value[4].nums = _totalCommission.totalShare
                totalCommission.value[5].nums = _totalCommission.totalPoints
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}
const update_time = ref(proxy.$util.formatTime(new Date()))
const dataArr = ref([
    {
        nums: 0,
        text: "总商品数量",
        bg: iconZspsl,
    },
    {
        nums: 0,
        text: "总订单数量",
        bg: iconZddsl,
    },
    {
        nums: 0,
        text: "总会员数量",
        bg: iconZhysl,
    },
])
/**
 * 商品数据
 */
const totalCommission = ref([
    {
        nums: 0,
        icon: iconZfhyj,
        text: "总分红佣金",
        unit: "",
    },
    {
        nums: 0,
        icon: iconZfhcs,
        text: "总分红次数",
        unit: "",
    },
    {
        nums: 0,
        icon: iconZzpyj,
        text: "总可支配佣金",
        unit: "",
    },
    {
        nums: 0,
        icon: iconZdjyj,
        text: "总冻结佣金",
        unit: "",
    },
  {
    nums: 0,
    icon: iconZfxyj,
    text: "总分享佣金",
    unit: "",
  },
  {
    nums: 0,
    icon: iconZjf,
    text: "总积分",
    unit: "",
  },
])
</script>

<script>
export default {
    name: "Home",
}
</script>

<style lang="less" scoped>
.home-aside-serve {
    display: flex;
    align-items: center;

    .aside-serve__img {
        flex: none;
        width: 46px;
        margin-right: @margin-sm;
    }

    .aside-serve__right {
        flex: 1;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;

        .aside-serve__title {
            width: 100%;
            flex: none;
            font-size: 14px;
            color: #000;
        }
    }
}

.home-aside-ad {
    border-radius: @radius-xs;
    width: 100%;
    display: flex;
    margin-bottom: 18px;
}

.home-edition {
    font-size: @font-size-md;
    color: @gray-8;

    .surplus-time {
        font-size: 20px;
        padding: 0px @padding-base;
    }

    .expired-active {
        color: #ff5050;
    }

    .edition-date {
        font-size: 13px;
        color: @gray-6;
    }
}

.home-edition__foot {
    margin-top: @padding-mdl;
    font-size: @font-size-md;
    color: @gray-6;

    .home-edition__btn {
        width: 100%;
        margin-top: @margin-md;

        .el-button {
            width: 100%;
            color: #fff;
            font-weight: bold;
            height: 38px;
            font-size: @font-size-lg;
            letter-spacing: 1px;
        }
    }
}

.echars-one {
    margin-bottom: @margin-mdl;

    .echars-one__item {
        flex: none;
        width: 49.4%;
        margin-bottom: 0;
    }
}

.echart-view {
    width: 100%;
    height: 340px;
}

.home-one {
    width: 100%;

    .one-item {
        flex: none;
        display: flex;
        width: 20%;
        padding: @padding-sm;
        cursor: pointer;

        &:hover {
            background-color: @gray-1;
        }

        .one-item-icon {
            flex: none;
            width: 54px;
            height: 54px;
            margin-right: @margin-sm;
        }

        .one-item__right {
            flex: 1;

            .one-item__nums {
                font-size: 28px;
                color: @gray-8;
                font-weight: bold;
            }

            .one-item__text {
                font-size: @font-size-md;
                color: @gray-6;
            }
        }
    }
}

.shop-one {
    margin-bottom: @margin-xl;

    .shop-one__item {
        flex: none;
        width: 32%;
        border-radius: @radius-md;
        padding: 34px 0px 0px 50px;
        color: #fff;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        height: 150px;
        overflow: hidden;

        &:last-child {
            margin-right: 0;
        }

        .shop-one__text {
            font-size: @font-size-md;
            margin-bottom: @margin-sm;
        }

        .shop-one__nums {
            font-size: 28px;
        }
    }
}

.shop-two {
    flex-wrap: wrap;
    .shop-two__item {
        flex: none;
        width: 32%;
        display: flex;
        // cursor: pointer;
        padding: @padding-md @padding-md @padding-md 40px;

        .shop-two-icon {
            flex: none;
            width: 50px;
            height: 50px;
            margin-right: @margin-sm;
        }

        .shop-two__right {
            flex: 1;
        }

        .shop-two__nums {
            font-size: 26px;
            color: @gray-8;

            span {
                font-size: @font-size-md;
                color: @gray-6;
                margin-left: @margin-base;
            }
        }

        .shop-two__text {
            font-size: @font-size-md;
            color: @gray-6;
            margin-bottom: @margin-base;
        }
    }
}

.home-box {
    display: flex;
    width: 100%;
}

.home-main {
    flex: 1;
    padding: 0 18px 0 0;
}

.home-aside {
    flex: none;
    width: 260px;

    .aside-ul {
        overflow: hidden;
    }

    .aside-li {
        cursor: pointer;
        font-size: @font-size-sm;
        display: flex;
        align-items: center;
        height: 28px;
        color: @gray-8;
        overflow: hidden;

        .aside-li__item {
            width: 100%;
            overflow: hidden;

            .aside-li__left {
                flex: 1;
                margin-right: @margin-xs;
            }

            .aside-li__right {
                flex: none;
            }
        }

        &:hover {
            color: @themes;
        }
    }
}
</style>
